<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 认证信息 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
	<view class="container" :style="{'--theme-color': themeColor}" v-if="loadEnd">
		<!-- 提示信息 -->
		<view class="container-tips">
			<view class="tips-box" :style="{'--tips-color': '#e6a23c'}" v-if="authStatus == 1">
				<view class="box-bg"></view>
				<view class="box-text">认证信息审核中</view>
			</view>
			<view class="tips-box" :style="{'--tips-color': '#DE2828'}" v-else-if="authStatus == 3">
				<view class="box-bg"></view>
				<view class="box-text">驳回原因：{{rejectReason}}</view>
			</view>
		</view>
		<!-- 表单区 -->
		<view class="container-form">
			<view class="form-item flex align-items-center">
				<view class="item-label">所属地区</view>
				<view class="item-input flex-item" v-if="isReadOnly">
					<view class="input">{{formData.district}}</view>
				</view>
				<view class="item-input flex-item flex align-items-center" @click="selectDistrict()" v-else>
					<text class="input" v-if="formData.district">{{formData.district}}</text>
					<text class="input placeholder" v-else>请选择所属地区</text>
					<image class="icon" src="/static/arrow_right.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="form-item flex align-items-center">
				<view class="item-label">姓名</view>
				<view class="item-input flex-item">
					<view class="input" v-if="isReadOnly">{{formData.name}}</view>
					<input class="input" v-model="formData.name" type="text" placeholder="请输入姓名" placeholder-class="placeholder" v-else />
				</view>
			</view>
			<view class="form-item flex align-items-center">
				<view class="item-label">手机号</view>
				<view class="item-input flex-item">
					<view class="input">{{userMobile}}</view>
				</view>
			</view>
			<view class="form-item flex align-items-center">
				<view class="item-label">身份证号</view>
				<view class="item-input flex-item">
					<view class="input" v-if="isReadOnly">{{formData.id_card}}</view>
					<input class="input" v-model="formData.id_card" type="idcard" placeholder="请输入身份证号" placeholder-class="placeholder" v-else />
				</view>
			</view>
			<view class="form-item flex align-items-center">
				<view class="item-label">驾龄</view>
				<view class="item-input flex-item" v-if="isReadOnly">
					<view class="input">{{formData.driving_experience}}</view>
				</view>
				<view class="item-input flex-item flex align-items-center" @click="selectExperience()" v-else>
					<text class="input" v-if="formData.driving_experience">{{formData.driving_experience}}</text>
					<text class="input placeholder" v-else>请选择驾龄</text>
					<image class="icon" src="/static/arrow_right.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="form-item flex align-items-center">
				<view class="item-label">驾照类型</view>
				<view class="item-input flex-item" v-if="isReadOnly">
					<view class="input">{{formData.driver_license_type}}</view>
				</view>
				<view class="item-input flex-item flex align-items-center" @click="selectLicenseType()" v-else>
					<text class="input" v-if="formData.driver_license_type">{{formData.driver_license_type}}</text>
					<text class="input placeholder" v-else>请选择驾照类型</text>
					<image class="icon" src="/static/arrow_right.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="form-item form-padding">
				<view class="item-label">身份证正面</view>
				<view class="item-image" v-if="isReadOnly">
					<image class="image" :src="frontIdcard" mode="widthFix" @click="previewImage(1)"></image>
				</view>
				<view class="item-image" v-else-if="frontIdcard">
					<image class="image" :src="frontIdcard" mode="widthFix" @click="previewImage(1)"></image>
					<image class="delete" src="/static/driver/delete.png" mode="aspectFit" @click="deleteImage(1)"></image>
				</view>
				<view class="item-upload flex-column flex-center" @click="chooseImage(1)" v-else>
					<image class="upload-bg" src="/static/driver/upload_1.png" mode="widthFix"></image>
					<view class="upload-box flex-column align-items-center">
						<view class="box-icon" :style="{'background-image': 'url('+ cameraIcon +')'}" v-if="cameraIcon"></view>
						<text class="box-text">上传图片</text>
					</view>
				</view>
			</view>
			<view class="form-item form-padding">
				<view class="item-label">车辆驾驶证正面</view>
				<view class="item-image" v-if="isReadOnly">
					<image class="image" :src="frontDriverLicense" mode="widthFix" @click="previewImage(2)"></image>
				</view>
				<view class="item-image" v-else-if="frontDriverLicense">
					<image class="image" :src="frontDriverLicense" mode="widthFix" @click="previewImage(2)"></image>
					<image class="delete" src="/static/driver/delete.png" mode="aspectFit" @click="deleteImage(2)"></image>
				</view>
				<view class="item-upload flex-column flex-center" @click="chooseImage(2)" v-else>
					<image class="upload-bg" src="/static/driver/upload_2.png" mode="widthFix"></image>
					<view class="upload-box flex-column align-items-center">
						<view class="box-icon" :style="{'background-image': 'url('+ cameraIcon +')'}" v-if="cameraIcon"></view>
						<text class="box-text">上传图片</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部区域 -->
		<view class="container-footer">
			<!-- #ifdef MP-WEIXIN -->
			<view class="footer-tips" v-if="isReadOnly">
				<view class="flex flex-center">
					<view class="tips-text">认证信息有误？</view>
					<button class="tips-btn clear" open-type="contact" @click.stop>联系客服</button>
				</view>
				<view class="safe-padding"></view>
			</view>
			<!-- #endif -->
			<view class="footer-button" v-if="!isReadOnly">
				<view class="button-read flex align-items-center" @click="isRead = !isRead">
					<view class="read-radio" :class="{active: isRead}">
						<image src="/static/tick.png" mode="aspectFit" v-if="isRead"></image>
					</view>
					<view class="read-label">请仔细阅读并同意<text class="text" @click.stop="toAgreement()">《代驾协议》</text></view>
				</view>
				<view class="button-btn">
					<view class="btn-box" @click="handleSubmit()">提交</view>
				</view>
				<view class="safe-padding"></view>
			</view>
		</view>
		<!-- 底部占空 -->
		<view class="container-blank">
			<!-- #ifdef MP-WEIXIN -->
			<view class="blank-box" :style="{height: isReadOnly ? '144rpx' : '224rpx'}"></view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="blank-box" :style="{height: isReadOnly ? '32rpx' : '224rpx'}"></view>
			<!-- #endif -->
		</view>
		<!-- 省市区选择框 -->
		<address-modal ref="addressModal" @onChange="pageChange" @confirm="changeSelectAddress"></address-modal>
		<!-- 选择弹窗 -->
		<select-picker ref="selectPicker" :title="selectPickerTitle" @onChange="pageChange" @confirm="changeSelectPicker"></select-picker>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import svgData from "@/common/svg.js"
	import addressModal from "@/pages/driver/component/modal/address.vue"
	import selectPicker from "@/pages/component/picker/select.vue"
	export default {
		components: {
			addressModal,
			selectPicker,
		},
		data() {
			return {
				// 加载完成
				loadEnd: false,
				// 页面是否阻止滚动
				pageShow: false,
				// 选择弹窗标题
				selectPickerTitle: "",
				// 驾龄列表
				experienceList: ["1年", "2年", "3年", "4年", "5年", "5年以上"],
				// 驾照类型列表
				licenseTypeList: [],
				// 表单内容
				formData: {},
				// 用户手机号
				userMobile: "",
				// 身份证正面
				frontIdcard: "",
				// 车辆驾驶证正面
				frontDriverLicense: "",
				// 认证状态
				authStatus: "",
				// 驳回原因
				rejectReason: "",
				// 表单是否只读
				isReadOnly: false,
				// 是否已读
				isRead: false,
			}
		},
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
				cameraIcon: state => {
					return svgData.svgToUrl("camera", state.app.themeColor)
				},
			})
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})
			this.getLicenseTypeList()
			this.getUserMobile()
			this.getUserInfo(() => {
				this.loadEnd = true
				uni.hideLoading()
			})
		},
		methods: {
			// 改变页面滚动状态
			pageChange(state) {
				this.pageShow = state
			},
			// 获取驾照类型列表
			getLicenseTypeList() {
				this.$util.request("driver.licenseType").then(res => {
					if (res.code == 1) {
						this.licenseTypeList = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('获取驾照类型列表 ', error)
				})
			},
			// 获取用户手机号
			getUserMobile() {
				this.$util.request("driver.getMobile").then(res => {
					if (res.code == 1) {
						this.userMobile = res.data.mobile
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('获取用户手机号 ', error)
				})
			},
			// 获取用户信息
			getUserInfo(fn) {
				this.$util.request("driver.user").then(res => {
					if (res.code == 1) {
						this.authStatus = res.data.certification_examine_status
						if (this.authStatus == 1 || this.authStatus == 2) {
							this.isReadOnly = true
							this.getAuthenticationInfo(() => {
								if (fn) fn()
							})
						} else if (this.authStatus == 3 || this.authStatus == 4) {
							this.getAuthenticationInfo(() => {
								if (fn) fn()
							})
						} else if (fn) fn()
					} else {
						if (fn) fn()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					if (fn) fn()
					console.error('获取用户信息 ', error)
				})
			},
			// 获取认证信息
			getAuthenticationInfo(fn) {
				this.$util.request("driver.authentication.details").then(res => {
					if (fn) fn()
					if (res.code == 1) {
						this.formData = res.data
						this.frontIdcard = res.data.front_id_card
						this.frontDriverLicense = res.data.front_vehicle_driver_license
						if (res.data.state == 3) this.rejectReason = res.data.reject
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					if (fn) fn()
					console.error('获取认证信息 ', error)
				})
			},
			// 选择所属地区
			selectDistrict() {
				this.selectPickerTitle = "请选择所属地区"
				this.$refs.addressModal.open(this.formData.district)
			},
			// 改变所属地区
			changeSelectAddress(value) {
				if (value.area == "全部") {
					this.formData.district = value.province + "/" + value.city
				} else {
					this.formData.district = value.province + "/" + value.city + "/" + value.area
				}
			},
			// 选择驾龄
			selectExperience() {
				this.selectPickerTitle = "请选择驾龄"
				this.$refs.selectPicker.open(this.experienceList, this.formData.driving_experience, 1)
			},
			// 选择驾照类型
			selectLicenseType() {
				this.selectPickerTitle = "请选择驾照类型"
				this.$refs.selectPicker.open(this.licenseTypeList, this.formData.driver_license_type, 2)
			},
			// 选择弹窗数据改变
			changeSelectPicker(value, type) {
				if (type == 1) {
					this.formData.driving_experience = value
				} else if (type == 2) {
					this.formData.driver_license_type = value
				}
			},
			// 选择图片
			chooseImage(type) {
				uni.chooseImage({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						if (type == 1) this.frontIdcard = res.tempFilePaths[0]
						else if (type == 2) this.frontDriverLicense = res.tempFilePaths[0]
					},
				})
			},
			// 删除图片
			deleteImage(type) {
				if (type == 1) this.frontIdcard = ""
				else if (type == 2) this.frontDriverLicense = ""
			},
			// 预览图片
			previewImage(type) {
				let list = []
				if (type == 1) list[0] = this.frontIdcard
				else if (type == 2) list[0] = this.frontDriverLicense
				uni.previewImage({
					urls: list,
				});
			},
			// 上传图片
			uploadImages(fn) {
				let newFiles = [this.frontIdcard, this.frontDriverLicense]
				let oldFiles = []
				if (this.authStatus == 3 || this.authStatus == 4) oldFiles = [this.formData.front_id_card, this.formData.front_vehicle_driver_license]
				this.$util.uploadFileMultiple(newFiles, oldFiles).then(result => {
					this.formData.front_id_card = result[0]
					this.formData.front_vehicle_driver_license = result[1]
					fn()
				}).catch(error => {
					console.error('上传文件 ', error)
				})
			},
			// 跳转协议
			toAgreement() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/driver/mine/settings/agreement?type=1"
				})
			},
			// 提交认证
			handleSubmit() {
				if (!this.isRead) {
					uni.showToast({
						icon: "none",
						title: "请阅读并同意代驾协议",
					})
					return
				}
				if (!this.formData.district) {
					uni.showToast({
						icon: "none",
						title: "请选择所属地区",
					})
					return
				}
				if (!this.formData.name) {
					uni.showToast({
						icon: "none",
						title: "请输入姓名",
					})
					return
				}
				if (!this.formData.id_card) {
					uni.showToast({
						icon: "none",
						title: "请输入身份证号",
					})
					return
				}
				if (!this.$util.validation("IDcard", this.formData.id_card)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的身份证号"
					})
					return
				}
				if (!this.formData.driving_experience) {
					uni.showToast({
						icon: "none",
						title: "请选择驾龄",
					})
					return
				}
				if (!this.formData.driver_license_type) {
					uni.showToast({
						icon: "none",
						title: "请选择驾照类型",
					})
					return
				}
				if (!this.frontIdcard) {
					uni.showToast({
						icon: "none",
						title: "请上传身份证正面",
					})
					return
				}
				if (!this.frontDriverLicense) {
					uni.showToast({
						icon: "none",
						title: "请上传车辆驾驶证正面",
					})
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.uploadImages(() => {
					this.$util.request("driver.authentication.submit", this.formData).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							this.$util.toPage({
								mode: 2,
								path: "/pages/driver/mine/authentication/success",
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}).catch(error => {
						uni.hideLoading()
						console.error('提交认证 ', error)
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		.container-tips {
			position: sticky;
			top: 0;
			z-index: 99;
			padding: 16rpx 32rpx;
			background: #FFF;

			.tips-box {
				.box-bg {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					background: var(--tips-color);
					opacity: .1;
				}

				.box-text {
					position: relative;
					z-index: 1;
					color: var(--tips-color);
					font-size: 26rpx;
					line-height: 40rpx;
				}
			}
		}

		.container-form {
			padding: 32rpx 32rpx 0;

			.form-item {
				margin-top: 32rpx;
				border-radius: 32rpx;
				background: #FFF;
				padding: 0 32rpx;

				&:first-child {
					margin-top: 0;
				}

				.item-label {
					color: #242629;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
				}

				.item-input {
					margin-left: 24rpx;

					.input {
						width: 100%;
						color: #242629;
						text-align: right;
						font-size: 28rpx;
						line-height: 40rpx;
						padding: 32rpx 0;
					}

					.placeholder {
						color: #8D929C;
					}

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-left: 16rpx;
					}
				}

				.item-upload {
					margin-top: 32rpx;
					position: relative;
					background: #FFF;

					.upload-bg {
						width: 100%;
						height: auto;
						border-radius: 16rpx;
					}

					.upload-box {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);

						.box-icon {
							width: 80rpx;
							height: 80rpx;
							background-size: 80rpx;
						}

						.box-text {
							margin-top: 8rpx;
							color: #242629;
							font-size: 28rpx;
							line-height: 40rpx;
						}
					}
				}

				.item-image {
					margin-top: 32rpx;
					position: relative;

					.image {
						width: 100%;
						height: auto;
						border-radius: 16rpx;
					}

					.delete {
						width: 48rpx;
						height: 48rpx;
						position: absolute;
						top: -14rpx;
						right: -14rpx;
					}
				}

				&.form-padding {
					padding: 32rpx;
				}
			}
		}

		.container-footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 96;

			.footer-tips {
				background: #F7F7F7;
				border-top: 1rpx solid #F6F7FB;
				padding: 32rpx;

				.tips-text {
					color: #242629;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.tips-btn {
					color: var(--theme-color);
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}

			.footer-button {
				background: #ffffff;

				.button-read {
					padding: 20rpx 32rpx;

					.read-radio {
						width: 40rpx;
						height: 40rpx;
						background: #E1E1E1;
						border-radius: 50%;
						overflow: hidden;

						&.active {
							background: var(--theme-color);
						}
					}

					.read-label {
						margin-left: 16rpx;
						color: #8D929C;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;

						.text {
							color: var(--theme-color);
						}
					}
				}

				.button-btn {
					padding: 16rpx 24rpx;

					.btn-box {
						color: #ffffff;
						font-size: 28rpx;
						line-height: 40rpx;
						padding: 20rpx 24rpx;
						border-radius: 40rpx;
						background: var(--theme-color);
						text-align: center;
					}
				}
			}
		}

		.container-blank {
			width: 100%;

			.blank-box {
				width: 100%;
			}
		}
	}
</style>